<template>
  <div class="threeD">
    <router-link to="/">tree</router-link>
    |
    <router-link to="/gisMap">map</router-link>
    |
    <router-link to="/threeD">3D scene</router-link>

    <div class="viewDiv" id="viewDiv"></div>
  </div>
</template>

<script>
import {loadModules} from 'esri-loader'

export default {
  name: 'ThreeD',
  mounted() {
    loadModules(["esri/Map","esri/WebScene", "esri/views/SceneView","esri/layers/FeatureLayer","esri/widgets/Legend"], { css: true })
        .then(([Map, WebScene,SceneView,FeatureLayer,Legend,ArcGISMap]) => {
//3D web scene
          const webscene = new WebScene({
            portalItem: {id: "579f97b2f3b94d4a8e48a5f140a6639b"}
          });
          this.view = new SceneView({
            container: "viewDiv",
            map: webscene
            //camera: {
            //  position: {
            //    x: -118.808,
            //    y: 33.961,
            //    z: 2000 // meters
            //  },
            //  tilt: 75
            //}
          });
          const legend = new Legend({
            view:this.view
          })
          this.view.ui.add(legend,'top-right')

//3D scene layer
          // const map = new Map({
          //   basemap: "topo-vector",
          //   ground: "world-elevation" // show elevation
          // });
          //
          // this.view  = new SceneView({
          //   container: "viewDiv",
          //   map: map,
          //   camera: {
          //     position: {
          //       x: -118.805,
          //       y: 34.027,
          //       z: 25000
          //     },
          //     tilt: 65 // perspective in degrees
          //   }
          // });
//可以用trailheadsLayer等替换
          // const featureLayer = new FeatureLayer({
          //   url:'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0'
          // })
          // map.add(featureLayer)
        //   const trailheadsLayer = new FeatureLayer({
        //     url: 'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0',
        //     renderer:{
        //       type: 'simple',
        //       symbol: {
        //         type: 'picture-marker',
        //         url: 'http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png',
        //         width: '18px',
        //         height: '18px'
        //       }
        //     }
        //   })
        //   const trailsLayer = new FeatureLayer({
        //     url:'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0',
        //     definitionExpresssion:"ELEV_GAIN < 250",
        //     renderer: {
        //       type:'simple',
        //       symbol: {
        //         type:'simple-line',
        //         color:'green',
        //         width: '2px',
        //       }
        //     },
        //     outFields:["TRL_NAME", "ELEV_GAIN"],
        //     popupTemplate:{
        //       title:"TRL_NAME",
        //       content:'The trail elevation gain is {ELEV_GAIN} ft.'
        //     }
        //   })
        //   const parksLayer = new FeatureLayer({
        //     url:'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0'
        //   })
        //   map.add(trailheadsLayer,0)
        //   map.add(trailsLayer,0)
        //   map.add(parksLayer,0)
        });
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.destroy();
    }
  }
}
</script>

<style scoped lang="scss">
.threeD {
  .viewDiv {
    margin-top: 20px;
    width: 1200px;
    height: 80vh;
  }
}
</style>